<template>
  <div class="mapSearch">
    <div class="header flex-r"
         style="justifyContent:space-between;"
         :class="{shadow:searching}">
      <div><i class="iconfont icon-sousuo"
           style="color:#FFFFFF;margin:0.18rem;fontWeight:600;"></i>
        <input type="text"
               v-model="searchContent"
               placeholder="请输入设备序列号/名称"
               @click.stop="searching=true"
               v-on:keyup.enter="search()" />
      </div>
      <div class="searchBtn flex-r"
           @click.stop="search()"><span>搜索</span></div>
    </div>
    <!-- 搜索类容---------------- -->
    <div class="content"
         v-show="searching">
      <div class="nv flex-r">
        <div :class="{nvActive:sitType===sit}"
             v-for="(sit, index) in sitTypes"
             :key="index"
             @click.stop="sitType=sit">{{sit}}</div>
      </div>
      <!-- 搜索结果---------------- -->
      <div class="searchResult">
        <!-- 父---------------- -->
        <div class="resultList"
             v-for="(result, index) in points"
             :key="index">
          <div class="areaInfo flex-r"
               style="padding:0.16rem;"
               :class="{chosedResult:chosedResult===result.code}"
               @click.stop="goSit(result.code)"
               v-if="points.length">
            <div style="width:0.48rem;marginRight:16px;"><img v-if="result.area_img"
                   :src="result.area_img" /><img :src="typeImg(result.typename)"
                   v-else></div>
            <div>
              <h4 style="width:2.5rem;"
                  class="ellipsis">{{result.dname}}</h4>
              <p style="width:2.5rem;"
                 class="ellipsis">{{result.address}}</p>
            </div>
          </div>
          <!-- 子---------------- -->
          <div class="sitInfo flex-r"
               v-show="false"
               style="background:rgba(255,255,255,0.15);padding:0.12rem;"
               v-if="points.length">
            <div style="width:0.48rem;marginLeft:0.64rem;marginRight:16px;"><img src="../../assets/img/AQM65.png"></div>
            <div>
              <h4 style="width:2rem;"
                  class="ellipsis">{{result.sitName}}</h4>
              <p style="width:2rem;"
                 class="ellipsis">{{result.sitAddress}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['positions'],
  data () {
    return {
      searchContent: '',
      searching: false,
      sitTypes: ['全部', '小型空气站', '微型空气站', '国控空气站'],
      sitType: '',
      chosedResult: 0,
      points: []
    }
  },
  methods: {
    goSit (code) {
      this.chosedResult === code ? this.chosedResult = null : this.chosedResult = code
      this.$bus.$emit('showCenter', code)
    },
    // 关闭搜索结果
    closeSearch () {
      var app = document.getElementById('app')
      var self = this
      app.addEventListener('click', function () {
        self.searching = false
      })
    },
    // 搜索
    search () {
      this.searching = true
      this.points = this.positions.filter(item => {
        return item.dname.indexOf(this.searchContent) !== -1 || item.name.indexOf(this.searchContent) !== -1
      })
    },
    typeImg (type) {
      if (type === '小型设备') {
        return require('../../assets/img/AQS.png')
      } else if (type === '微型设备') {
        return require('../../assets/img/AQM65.png')
      } else {
        return require('../../assets/img/AQX.png')
      }
    }
  },
  mounted () {
    this.closeSearch()
  },
  watch: {
    sitType (value) {
      this.$nextTick(() => {
        if (value === '小型空气站') {
          this.points = this.positions.filter(item => {
            return item.typename === '小型设备'
          })
        } else if (value === '微型空气站') {
          this.points = this.positions.filter(item => {
            return item.typename === '微型设备'
          })
        } else if (value === '全部') {
          this.points = this.positions.filter(item => {
            return item
          })
        } else {
          this.points = this.positions.filter(item => {
            return item.typename === '国控设备'
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.mapSearch {
  width: 3.64rem;
  min-width: 260px;
  .header {
    background: #405891;
    z-index: 104;
    position: relative;
    width: 100%;
    height: 0.4rem;
    overflow: hidden;
    min-height: 24px;
    border-radius: 0.2rem;
    input {
      height: 0.22rem;
      min-height: 12px;
      border: none;
      outline: none;
      background: none;
      width: 1.85rem;
      min-width: 150px;
    }
    input::placeholder {
      color: white;
      opacity: 0.65;
    }
    .searchBtn {
      background: #437ede;
      color: white;
      text-align: center;
      height: 100%;
      cursor: pointer;
      font-weight: 600;
      width: 0.8rem;
      min-width: 56px;
      justify-content: center;
      min-height: 28px;
    }
  }
  .shadow {
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.3);
  }
  .content {
    width: 100%;
    height: 5.8rem;
    position: relative;
    padding-top: 0.36rem;
    min-height: 400px;
    background: #405891;
    border-radius: 0px 0px 0.16rem 0.16rem;
    transform: translateY(-0.2rem);
    z-index: 103;
    .nv {
      width: 100%;
      min-height: 22px;
      height: 0.3rem;
      font-size: 0.12rem;
      margin-bottom: 0.1rem;
      justify-content: space-around;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      div {
        padding: 0.04rem 0.08rem;
        border-radius: 0.12rem;
      }
      .nvActive {
        background: #437ede;
      }
    }
    .searchResult {
      color: white;
      cursor: pointer;
      height: calc(100% - 0.4rem);
      overflow: auto;
      .chosedResult {
        background: #437ede;
      }
      img {
        height: 0.48rem;
        width: 100%;
        height: 100%;
        min-width: 34px;
        min-height: 34px;
      }
      h4 {
        margin: 0;
        font-size: 0.14rem;
        color: white;
        min-width: 140px;
      }
      p {
        font-size: 0.12rem;
        min-width: 140px;
        margin: 0;
        margin-top: 0.1rem;
        color: rgba(255, 255, 255, 0.6);
      }
    }
    .searchResult::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    .searchResult {
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE 10+ */
    }
  }
}
</style>
